<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 群聊室</title>
    <link rel="stylesheet" href="style.css">
    <!-- Favicon Links -->
    <link rel="icon" type="image/png" sizes="16x16" href="image/icons/icon16.png">
    <link rel="icon" type="image/png" sizes="48x48" href="image/icons/icon48.png">
    <link rel="icon" type="image/png" sizes="128x128" href="image/icons/icon128.png">
    <link rel="apple-touch-icon" sizes="128x128" href="image/icons/icon128.png">
</head>
<body id="ai-group-chat-project">
    <div id="chat-container">
        <div id="chat-header">
            <h1>AI 群聊室</h1>
            <div id="controls-area">
                 <label for="config-select">配置:</label>
                 <select id="config-select" title="选择配置文件"></select>
                 <select id="chat-session-select" title="选择聊天记录"></select>
                 <div id="ai-status">
                     <!-- AI 状态或按钮将动态添加到这里 -->
                 </div>
            </div>
        </div>
        <div id="chat-messages">
            <!-- 聊天消息将显示在这里 -->
        </div>
        <div id="input-wrapper"> <!-- Add a wrapper for better layout control -->
            <div id="image-preview-area" style="display: none;">
                 <img id="image-preview" src="#" alt="图片预览" />
                 <button id="remove-image-button" title="移除图片">×</button>
            </div>
            <div id="chat-input-area">
                <input type="file" id="image-input" accept="image/*" style="display: none;" />
                <!-- Wrapper for left-side buttons -->
                <div class="left-input-buttons">
                     <button id="new-chat-button" title="开始新的聊天">NEW</button>
                     <label for="image-input" id="attach-image-button" class="button-like-label" title="添加文件">File</label> <!-- Changed to label -->
                </div>
                <textarea id="message-input" placeholder="输入你的消息..." rows="1"></textarea> <!-- Start with 1 row -->
                <button id="send-button" title="发送消息">发送</button>
                <!-- NEW button moved to the left wrapper -->
                <div id="ai-buttons" style="display: none;">
                    <!-- AI 发言按钮将动态添加到这里 (用于 ButtonSend 模式) -->
                </div>
            </div>
        </div>
        </div>
        <div id="floating-ai-status-window">
             <h4>本轮发言 AI</h4>
             <div id="current-round-ais">
                 <!-- 当前轮次发言的 AI 头像/名称将显示在这里 -->
             </div>
        </div>
    </div>

    <!-- <script src="config.js"></script> --> <!-- 改为动态加载 -->
    <!-- 引入 marked.js 用于 Markdown 解析 -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="script.js"></script>
</body>
</html>